<template>
  <div class="query">
    <div class="check">
      <div class="c_left">条件搜索栏</div>
      <div class="c_right">
        <div class="clear">
          <div class="fl">
            <span class="c_tip">选择条件</span>
            <el-select v-model="value" placeholder="请选择" class="c_select">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="fl">
            <span class="c_tip">查询关键字</span>
            <input type="text" class="c_input" placeholder="查询关键字">
          </div>

          <div class="fl" style="margin-left:65px;">
            <el-button type="primary" class="btn_clear">查询</el-button>
            <el-button type="success" class="btn_clear">新增</el-button>
            <el-button type="warning" class="btn_clear">刷新</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="list_tip clear" />
    <div class="table_box">
      <um-table />
    </div>
  </div>
</template>

<script>
import UmTable from './childComponent/UmTable'
export default {
  components: { UmTable },
  data() {
    return {
      checkList: ['禁忌'],
      options: [{
        value: 'userid',
        label: '账户'
      }, {
        value: 'username',
        label: '姓名'
      }],
      value: '',
      value1: '',
      dialogDrugs: false,
      dialogDoctor: false,
      dialogPerson: false,
      multipleSelection: [],
      input: '',
      pType: '11'
    }
  },
  methods: {
    selectPop(val) {
      this.$refs.ptable.show()
      this.pType = val
    },
    showMore() {
      this.sbtnFlag = true
      this.style = ''
    },
    showHide() {
      this.sbtnFlag = false
      this.style = 'height: 60px;padding-top: 10px;'
    },
    getList() {

    }
  }
}
</script>

<style lang="scss" scoped="scoped">
  body{
    background:#e6edf5;
  }
  .query{
    width:100%;
    height:100%;
    background:#e6edf5;
    .check{
      font-size:12px;
      display:flex;
      line-height:60px;
      background:#fff;
      text-align:center;
      .c_left{
        width:115px;
        float:left;
      }
      .c_right{
        overflow:hidden;
        color:#636365;
        border-left:1px solid #e6edf5;
        .c_tip{
          display:inline-block;
          width:100px;
          padding-right:10px;
          text-align:right;
        }
        .c_input{
          width:150px;
          height:40px;
          border:1px solid #dcdfe6;
          border-radius:4px;
          padding-left:5px;
        }
        .c_input::-webkit-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-ms-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-moz-input-placeholder {
          color: #dcdfe6;
        }
        .c_search{
          width:100px;
        }
        .c_searchbtn{
          display:inline-block;
          width:42px;
          height:25px;
          margin-left:4px;
          background:#28a4f4;
          color:#fff;
          font-size:12px;
          text-align:center;
          line-height:26px;
          border-radius:6px;
          cursor:pointer;
        }
        .c_checkbox{
          width:230px;
          height:40px;
          display:inline-block;
          margin-left:-12px;
        }
        .btn_clear{
          padding:0;
          width:70px;
          height:40px;
          line-height:40px;
        }
      }
    }
    .list_tip{
      font-size:14px;
      color:#29a4f2;
      padding:10px 18px;
    }
    .table_box{
      padding:0 18px;
    }
  }
  .el-checkbox__label{
    padding-left:5px;
  }
  .el-checkbox{
    margin-right:10px;
  }
</style>
